<template>
  <div class="title">
    热卖计算机
  </div>
  <!-- 商品信息 -->
  <ul v-if="rowList.length > 0" v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <li v-for="(row, index) in rowList" :key="index">
      <el-row>
        <el-col
            style="margin-left: 60px;margin-top: 18px;"
            v-for="goods in row"
            :key="goods.id"
            :span="4"
          >
            <el-card shadow="hover" @click="clickGoods(goods.id)" :body-style="{ padding: '0px', cursor:'pointer' }">
              <el-image
                :src="goods.picture"
                class="image"
              >
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
              <div style="padding: 8px">
                <span>{{goods.name}}</span>
                <div class="bottom">
                  {{ goods.price }} <span style="color:red;">元</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
    </li>
  </ul>
  <el-empty v-if="rowList.length == 0" description="暂无数据" />

</template>

<script setup>
import { ref, onMounted,reactive ,watch } from 'vue';
import { useRouter,useRoute } from "vue-router";
import {pageList} from '@/api/goods.js';
import {Picture as IconPicture} from "@element-plus/icons-vue";
import { ElLoading } from 'element-plus'
const router = useRouter();
const route = useRoute();
// 分页数据
const pageInfo = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 8,
});
const pageListReq = reactive({
  assort: null,
  name: null,
  accessoryName: null
})
// 行数
const rowList = ref([])
watch(
  ()=>route.query,
  async (query)=>{
    console.log(query);
    if(query){
      rowList.value = [];
      pageInfo.pageNum = 1;
      pageListReq.name = query.search;     
    }
    await search();
  }
)  
onMounted(async()=>{
  rowList.value = []
  if(route.query){
    pageListReq.name = route.query.search;
  }
  await search();
})

// 查询商品信息
const search = async()=>{
  const loading = ElLoading.service({ fullscreen: true });
  const response = await pageList(pageInfo,pageListReq);
  const data = response.data.data;
  const list = data.list;
  pageInfo.total = data.total;
  let tempArray = [];
  for(let i = 1;i < list.length + 1; i++) {
    tempArray.push(list[i-1]);
    if(i % 4 == 0) {
      // 添加到rowList中
      rowList.value.push(tempArray);
      tempArray = [];
    }
  }
  if(tempArray.length > 0) {
    rowList.value.push(tempArray);
  }
  loading.close();
}

// 点击商品
const clickGoods = async(id)=>{
  console.log('跳转到:'+id+"页面")
  router.push({path:`/goodsDetils`,query: {goodsId: id}} );
}

// 划到底部加载
const load = async()=>{
  pageInfo.pageNum++;
  await search();
}

</script>

<style scoped>
.image-slot{
  font: 80%;
}
.title {
  font-size: 20px;
  border-left-style: solid;
  border-left-color: red;
  border-left-width: 4px;
  padding-left: 10px;
}
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}


.bottom {
  margin-top: 13px;
  line-height: 12px;
  text-align: right;
}



.image {
  width: 100%;
  display: block;
}
</style>